<template>
  <el-container>
    <el-main>
      <div id="main" style="width: 1400px;height: 700px;"></div>
    </el-main>
  </el-container>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: "PaperKeyWord",
    methods:{
      drawPie(id){
        this.charts = echarts.init(document.getElementById(id))
        this.charts.setOption({
          title: {
            text: '博客文章分词',
            subtext: '出现频率Top15',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            left: 'center',
            top: 'bottom',
            data: ['php', 'Python', '数据库', '技术', 'mysql', '区块链', '服务器', '公司',
              '算法', 'java', 'Android', 'vue', '业务', '人工智能']
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              magicType: {
                show: true,
                type: ['pie', 'funnel']
              },
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          series: [
            {
              name: '分词占比',
              type: 'pie',
              radius: [35, 270],
              center: ['50%', '50%'],
              roseType: 'area',
              data: [
                {value: 3252, name: 'php'},
                {value: 2933, name: 'Python'},
                {value: 2860, name: '数据库'},
                {value: 2766, name: '技术'},
                {value: 2508, name: 'mysql'},
                {value: 2442, name: '区块链'},
                {value: 2342, name: '服务器'},
                {value: 2328, name: 'java'},
                {value: 2202, name: '公司'},
                {value: 2161, name: '算法'},
                {value: 1972, name: 'Android'},
                {value: 1927, name: '"vue'},
                {value: 1808, name: '业务'},
                {value: 1766, name: '人工智能'},
                {value: 1676, name: 'Spring'},
              ]
            }
          ]
        });
      }
    },
    //调用
    mounted(){
      this.$nextTick(function() {
        this.drawPie('main')
      })
    }
  }
</script>

<style scoped>

</style>